<template>
  <div class="sign">
    <div class="head">
      <!-- <van-icon name="arrow-left" /> -->
      <i @click="goLogin">←</i>
      <h1>Sign up</h1>
    </div>
    <div class="main">
      <div class="main_t_l">
        <img src="../assets/google icon 1.png" />
        <p>Google</p>
      </div>
      <div class="main_t_r">
        <img src="../assets/Vector.png" />
        <p>Facebook</p>
      </div>
      <p class="t">Or Sign up using</p>
      <div class="one"><p>First Name</p></div>
      <div class="two"><p>Last Name</p></div>
      <div class="three"><p>Mail</p></div>
      <div class="four"> <p>Password</p><img alt="Vue logo" src="../assets/Vector 132.png" /></div>
      <p class="b">Forgot your password?</p>
      <div class="five"><p @click="gohome">Log in</p></div>
    </div>
    <div class="bottom">
      <p class="b_l">Already have an account?</p>
      <p class="b_r">Sign in</p>
      <div class="b_b"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    gohome() {
      localStorage.setItem("token", "666");
      // 跳转拦截的路由
      this.$router.push("/index");
    },
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.sign {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: rgb(226, 225, 225);
  .head {
    height: 2rem;
    i {
      position: absolute;
      top: 0.8rem;
      left: 0.335rem;
      color: #000;
      font-weight: bolder;
      font-size: 0.3rem;
    }
    h1 {
      position: absolute;
      top: 1.28rem;
      left: 0.3rem;
    }
  }
  .main {
    width: 100%;
    overflow: auto;
    flex: 1;
    .main_t_l {
      width: 1.67rem;
      height: 0.5rem;
      position: absolute;
      top: 2.4rem;
      left: 0.3rem;
      line-height: 0.5rem;
      background-color: #fff;
      border-radius: 0.3rem;
      font-weight: bolder;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      p {
        position: absolute;
        width: 0.55rem;
        height: 0.18rem;
        left: 0.7rem;
        bottom: 0.15rem;
      }
      img {
        position: absolute;
        width: 0.33rem;
        height: 0.33rem;
        left: 0.2rem;
        top: 0.1rem;
      }
    }
    .main_t_r {
      width: 1.67rem;
      height: 0.5rem;
      position: absolute;
      top: 2.4rem;
      right: 0.3rem;
      line-height: 0.5rem;
      text-align: center;
      background-color: #3498db;
      color: #fff;
      border-radius: 0.3rem;
      font-weight: bolder;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      p {
        position: absolute;
        width: 0.55rem;
        height: 0.18rem;
        left: 0.7rem;
        bottom: 0.15rem;
      }
      img {
        position: absolute;
        left: 0.2rem;
        top: 0.1rem;
      }
    }
    .t {
      position: absolute;
      top: 2.91rem;
      left: 1.66rem;
      font-size: 10px;
    }
    .one {
      width: 3.54rem;
      height: 0.5rem;
      position: absolute;
      top: 3.42rem;
      left: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #fff;
      p {
        position: absolute;
        left: 0.74rem;
        color: rgb(119, 119, 119);
        font-size: 0.15rem;
      }
    }
    .two {
      width: 3.54rem;
      height: 0.5rem;
      position: absolute;
      top: 4.12rem;
      left: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #fff;
      p {
        position: absolute;
        left: 0.74rem;
        color: rgb(119, 119, 119);
        font-size: 0.15rem;
      }
    }
    .three {
      width: 3.54rem;
      height: 0.5rem;
      position: absolute;
      top: 4.82rem;
      left: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #fff;
      p {
        position: absolute;
        left: 0.74rem;
        color: rgb(119, 119, 119);
        font-size: 0.15rem;
      }
    }
    .four {
      width: 3.54rem;
      height: 0.5rem;
      position: absolute;
      top: 5.52rem;
      left: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #fff;
      p {
        position: absolute;
        left: 0.74rem;
        color: rgb(119, 119, 119);
        font-size: 0.15rem;
      }
	  img{
		  position: absolute;
		  top: 0.2rem;
		  right: 0.3rem;
	  }
    }
    .b {
      position: absolute;
      top: 6.22rem;
      left: 2.68rem;
      font-size: 0.1rem;
    }
    .five {
      width: 3.54rem;
      height: 0.5rem;
      position: absolute;
      top: 6.68rem;
      left: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #00cec9;
      color: #fff;
      p {
        text-align: center;
        font-size: 0.15rem;
        font-weight: bolder;
      }
    }
  }
  .bottom {
    height: 0.8rem;
    position: relative;
    .b_l {
      position: absolute;
      bottom: 0.5rem;
      left: 1.24rem;
    }
    .b_r {
      position: absolute;
      bottom: 0.5rem;
      left: 3.1rem;
      color: #00cec9;
    }
    .b_b {
      width: 1.34rem;
      height: 0.05rem;
      position: absolute;
      bottom: 0.08rem;
      left: 1.4rem;
      background-color: #000;
    }
  }
}
</style>